<template>
    <div id="relase">
        <div class="regTitle">注册用户</div>
        <el-form  :model="ruleForm2" status-icon :rules="rules" round="false"   ref="ruleForm2" label-width="100px" size="medium" class="demo-ruleForm">
            <el-form-item label="手机号" prop="Phone">
                <el-input type="text" v-model="ruleForm2.Phone" autocomplete="off" placeholder="请填写手机号"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名" prop="Name">
                <el-input  type="text" v-model="ruleForm2.Name" autocomplete="off" placeholder="请输入真实姓名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-radio v-model="ruleForm2.Sex" label="男">男</el-radio>
                <el-radio v-model="ruleForm2.Sex" label="女">女</el-radio>
            </el-form-item>
            <el-form-item label="工作单位" prop="Company">
                <el-input v-model.company="ruleForm2.Company" placeholder="请填写工作单位"></el-input>
            </el-form-item>
            <el-form-item label="设置密码" prop="Password">
                <el-input v-model.Password="ruleForm2.Password" type="password" placeholder="请填写登陆密码"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="Email">
                <el-input  v-model.email="ruleForm2.Email" placeholder="请填写邮箱"></el-input>
            </el-form-item>
            <el-form-item label="简介" prop="description">
                <el-input  v-model.email="ruleForm2.description" placeholder="请填写简介"></el-input>
            </el-form-item>
            <!--<el-form-item label="验证码" prop="yz">
                <el-col :span="12">
                    <el-input size="medium" v-model.yz="ruleForm2.yz" placeholder="请填写验证密码"></el-input>
                </el-col>
                <el-col :span="12">
                    <el-button @click="getMsgCode">获取普通验证码</el-button>
                </el-col>
            </el-form-item>-->
            <el-form-item label="">
                阅读并接受<a href="#">《用户协议》</a>
            </el-form-item>
            <el-form-item>
                <el-button type="success" class="regButton" native-type="submit" @click.prevent="submitForm('ruleForm2')">注册</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {

                    callback();
                }
            };

            var checkUser = (rule,value,callback) => {
                if(value==='') {
                    callback(new Error('请输入手机号码'))
                } else if (!rule.pattern.test(value)) {
                    callback(new Error('请输入正确手机号！'))
                } else {
                    callback()
                }
            }
            return {
                ruleForm2: {
                    Phone:'19861601056',
                    Name:'张安昊',
                    Sex:'男',
                    Company:'菏泽学院',
                    Password: '123456',
                    Email: '2837041086@qq.com',
                    description:'大家好'
                },
                rules: {
                    Phone:[
                        {required:true,pattern: /^1[12345789]\d{9}$/,trigger:'blur',validator:checkUser}
                    ],
                    Name:[
                        {required:true,message:'真实姓名不能为空！',trigger:'blur'}
                    ],
                    Company:[{
                        required:true,
                        message:'公司名称不能为空！',
                        trigger:'blur'
                    }],
                    Password: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    Email:[
                        {required:true,message:'请输入邮箱',trigger:'blur'},
                        {type: 'email', message: '请输入正确的邮箱地址',trigger: 'blur'
                        }]
                }
            };
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    this.$store.commit('ADDDAT', this.ruleForm2)
                    console.log('数据已加载');
                    // alert(JSON.stringify(this.$store.getters.getDat))
                    alert("注册成功")
                    this.$router.push({'path':'/index/bottom'})

                });
            },
          /*  setVuex(response) {
                //将用户名和token放入sessionStorage
                sessionStorage.setItem('userName',this.ruleForm2.Phone)
                sessionStorage.setItem('user',JSON.stringify(response.data))
                console.log(response.data+'数据已加载');

                /!*sessionStorage.setItem('userToken',response.data.token)
                //将用户名(用户对象信息)放入vuex response.data.res.username
                //需要确定关老师传过来的数据
                this.$store.dispatch('setUser',response.data)
                this.$store.dispatch('setToken',response.data.token)*!/
                //打印login状态
                //console.log('登成功！录'+this.$store.state.isLogin)

            },*/
            /*getMsgCode(formName) {
                this.$refs[formName].resetFields();
            }*/
        }
    }
</script>

<style>
    .regTitle {
        height: 150px;
        font-size: 24px;
        line-height: 150px;
    }
    .el-form {
        width: 445px;
        margin: 0 auto;
        /* font-weight: bod; */
    }
    .el-input__inner {
        border-radius: 0px;
    }
    .regButton {
        width: 350px;
        height: 46px;
        border-radius: 0px;
    }
</style>
